<template>
  <div class="historical_data_wrap">
    <p>
      <CnBoldP class="mt-11 text-20">历史数据</CnBoldP>
    </p>
    <p class="mt-10">
      <CnNormalP>根据您点击的设备，跳转到参数历史记录</CnNormalP>
    </p>
    <div class="dev_list_box">
      <a-card class="dev_item_card"> 111 </a-card>
    </div>
    <!-- <h1>历史数据</h1> -->
    <!-- <a-card class="left_card card_box">
      <div class="title_box">
        <img class="icon" src="./image/dev.svg" />
        <span class="text">设备列表</span>
      </div>
      <a-spin class="load" v-if="isDevListLoading" />
      <div v-else class="content_box">
        <div class="dev_list_box">
          <div class="dev_item_box">111</div>
          <div class="dev_item_box">111</div>
          <div class="dev_item_box">111</div>
          <div class="dev_item_box">111</div>
          <div class="dev_item_box">111</div>
          <div class="dev_item_box">111</div>
          <div class="dev_item_box">111</div>
          <div class="dev_item_box">111</div>
          <div class="dev_item_box">111</div>
          <div class="dev_item_box">111</div>
          <div class="dev_item_box">111</div>
          <div class="dev_item_box">111</div>
          <div class="dev_item_box">111</div>
          <div class="dev_item_box">111</div>
          <div class="dev_item_box">111</div>
          <div class="dev_item_box">111</div>
          <div class="dev_item_box">111</div>
          <div class="dev_item_box">111</div>
          <div class="dev_item_box">111</div>
        </div>
      </div>
    </a-card>
    <a-card class="right_card card_box">
      <div class="title_box">
        <img class="icon" src="./image/param.svg" />
        <span class="text">参数列表</span>
      </div>
    </a-card> -->
  </div>
</template>

<script lang="ts">
  import {defineComponent, ref, onMounted} from 'vue'
  export default defineComponent({
    name: 'HistoricalData'
  })
</script>
<script lang="ts" setup>
  import {CnMediumP, CnBoldP} from '@/components/text'
  import {getUserId} from '@/libs/auth'
  import {selectSimpleDevList} from '@/api/public.ts'

  // 查询设备列表的函数
  const selectSimpleDevListFunc = async () => {
    let userId = getUserId()
    await selectSimpleDevList({userId: userId}).then(res => {
      devListData.value = res.data
    })
  }

  // 设备列表加载标识
  const isDevListLoading = ref(true)

  // 参数列表加载标识
  const isParamListLoading = ref(false)

  // 设备列表数据
  const devListData = ref([])

  // 参数列表数据
  const paramListData = ref([])

  // init
  onMounted(() => {
    selectSimpleDevListFunc()
  })
</script>

<style lang="less" scoped>
  :deep(.ant-card-body) {
    padding: 0px;
  }

  .historical_data_wrap {
    height: 86vh;
    // display: flex;
    // flex-direction: row;

    // .card_box {
    //   .title_box {
    //     height: 46px;
    //     line-height: 46px;
    //     // background: url(https://d.lohand.com:1112/images/ConstantBlueCloud/WEB/card-vein-inline.png)
    //     //   no-repeat;
    //     // background-size: 100% 100%;
    //     background: linear-gradient(to right, #d9ebf7, #edf2fc);
    //     padding-left: 16px;
    //     border-top-left-radius: 6px;
    //     border-top-right-radius: 6px;
    //     display: flex;

    //     .icon {
    //       width: 22px;
    //       height: 22px;
    //       position: relative;
    //       top: 50%;
    //       transform: translateY(-50%);
    //       margin-right: 8px;
    //     }

    //     .text {
    //       color: rgb(49, 69, 106);
    //       font-family: kaigengo-regular;
    //       font-weight: bold;
    //       font-size: 16px;
    //       letter-spacing: 1px;
    //     }
    //   }
    // }

    // .left_card {
    //   width: 340px;
    //   height: 100%;
    //   margin-right: 14px;
    //   border-radius: 6px;
    //   position: relative;

    //   .load {
    //     position: absolute;
    //     top: 20%;
    //     left: 50%;
    //     transform: translateX(-50%);
    //   }

    //   .content_box {
    //     // border: 1px solid red;
    //     padding: 0px 0px 0px 8px;
    //     height: 80vh;

    //     .dev_list_box {
    //       height: 100%;
    //       overflow-y: auto;
    //       display: flex;
    //       flex-direction: column;

    //       .dev_item_box {
    //         height: 60px;
    //         padding: 12px 0px;
    //         box-sizing: border-box;
    //         border: 1px solid rgba(#cccccc, 0.7);
    //         margin-top: 10px;
    //         margin-right: 10px;
    //         border-radius: 4px;
    //       }
    //     }
    //   }
    // }

    // .right_card {
    //   flex: 1;
    //   border-radius: 6px;
    // }
  }
</style>
